<!DOCTYPE html>
<html lang="CN">
   <head>
      <meta charset="utf-8"/>
      <title>拖动动画</title>
      <style>
         *{
             margin: 0;
             padding: 0;
         }
         #canvas{
            background: #000;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas"></canvas>
   </body>
   <script>
       let canvas=document.getElementById("canvas"),
           ctx=canvas.getContext("2d"),
           WIDTH=document.documentElement.clientWidth,
           HEIGHT=document.documentElement.clientHeight,
           para={
               num:100,
               color:false,
               r:1.5,
               o:0.05,
               a:1
           },
           color,
           color2,
           round_arr=[];
       canvas.width=WIDTH;
       canvas.height=HEIGHT;   
       window.onmousemove = function (event) {

        mouseX = event.clientX;
        mouseY = event.clientY;

        round_arr.push({
            mouseX: mouseX,
            mouseY: mouseY,
            r: 30,
            o: 1
        })
        };
       // 判断参数中是否设置了 color，如果设置了 color，就使用该值、
        // 如果参数中的 color 为 false，那么就使用随机的颜色
        if (para.color) {
            color2 = para.color;
        } else {
            color = Math.random() * 360;
        }
       function animate(){
            if (!para.color) {
                color += .1;
                color2 = 'hsl(' + color + ',100%,80%)';
            }
           ctx.clearRect(0,0,WIDTH,HEIGHT);
           for(let i=0;i<round_arr.length;i++){
               ctx.fillStyle=color2;
               ctx.beginPath();
               ctx.arc(round_arr[i].mouseX ,round_arr[i].mouseY,round_arr[i].r,0, Math.PI * 2);
               ctx.closePath();
               ctx.fill();
               round_arr[i].r -= para.r;
               if( round_arr[i].r <= 0){
                    round_arr.splice(i,1);
                    i--;
                }
           }
           window.requestAnimationFrame(animate);
       }
       animate();
   </script>
</html>